import React from 'react';
import withRouter from '../router/withRouter'
import axios from 'axios'
import './Hero.css'

class Hero extends React.Component {

    componentDidMount() {
        let search = this.props.search
        let id = search.get("id")
        axios.get(`https://game.gtimg.cn/images/lol/act/img/js/hero/${id}.js`)
            .then(({ data }) => {
                this.setState({
                    alias: data.hero.alias,
                    hero: data.hero,
                    skins: data.skins,
                    spells: data.spells
                })
            });
    }
    state = {
        alias: '',
        hero: {},
        skins: [],
        spells: []
    }
    render() {
        let { hero,alias } = this.state;
        console.log(hero);
        // console.log(id);
        // console.log(spells);
        return (
            <div className='box1'>
                <div className="uname">
                    {hero.name}&
                    {hero.title}
                </div>
                <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${alias}.png`} alt="" />
            </div>
        )
    }
}
export default withRouter(Hero)